<template>
  <div class="git-status" @click.stop="">
    <div class="git-status-title">
      <div>{{workspace || `仓库状态`}}</div>
      <div><span @click="onCancle">X</span></div>
    </div>
    <div class="git-status-cont">
      <div class="git-status-left">
        <div>
          <div class="git-status-left-title">
            <div>已暂存文件</div>
            <div><span @click="gitUnStage">取消全部</span><span>取消选中</span></div>
          </div>
          <ul class="git-status-list" v-for="(item, index) in status" :key="index">
            <li>
              <div>{{item && item.selfConf}}</div>
                <ul>
                  <li v-for="(key, indexx) in item.status.staged" :key="indexx">
                    <div :class="{active: curFile === key}" @click="handelClick(key, item)">{{key.filePath}} {{item.repertory}}</div>
                  </li>
                </ul>
            </li>
          </ul>
        </div>
        <div>
          <div class="git-status-left-title">
            <div>未暂存文件</div>
            <div><span @click="gitAddAll">暂存全部</span><span>暂存选中</span></div>
          </div>
          <ul class="git-status-list" v-for="(item, index) in status" :key="index">
            <li>
              <div>{{item.selfConf}}</div>
              <ul>
                <li v-for="(key, indexx) in item.status.unStagedChange" :key="indexx">
                  <div :class="{active: curFile === key}" @click="handelClick(key, item)">{{key.filePath}} {{item.repertory}}</div>
                </li>
              </ul>
              <ul>
                <li v-for="(key, indexx) in item.status.unStagedFile" :key="indexx">
                  <div :class="{active: curFile === key}" @click="handelClick(key, item)">{{key.filePath}} {{item.repertory}}</div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div>
          <div class="git-status-left-title">
            <div>冲突</div>
            <div><span @click="gitAddAll">暂存全部</span><span>暂存选中</span></div>
          </div>
          <ul class="git-status-list" v-for="(item, index) in status" :key="index">
            <li>
              <div>{{item.selfConf}}</div>
              <ul>
                <li v-for="(key, indexx) in item.status.conflicts" :key="indexx">
                  <div :class="{active: curFile === key}" @click="handelClick(key, item)">{{key.filePath}} {{item.repertory}}</div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <div class="git-status-right">
        <ul>
          <li v-for="(lines, index) in diff && diff.list" :key="index">
            <div
              v-for="line in lines.list"
              :class="{enc: isEnc(line.name), dec: isDec(line.name), active: line.isActive}"
              @click="line.isActive=!line.isActive"
            >
              <b>{{line.ori}}</b>
              <b>{{line.now}}</b>
              <span v-html="line.name.replace(/ /, '&nbsp;')"></span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="git-status-foot">
      <div><input type="text" placeholder="commit" v-model="commitMsg"></div>
      <span @click="onConfirm">提交</span>
    </div>
  </div>
</template>
<script>
  import devAjax from "../devAjax";
  export default {
    name: 'input-group',
    props: ["conf", 'userName'],
    data() {
      return {
        diff: null,
        curFile: null,
        commitMsg: "",
      }
    },
    computed: {
      workspace(){
        const {status} = this;
        return status && status[0] && status[0].workspace;
      },
      status(){
        return this.conf.status;
      },
    },
    methods: {
      gitUnStage(){
        devAjax.devToolGitUnStage({workspace: this.workspace}).then(res => {
          this.conf.reInit();
        })
      },
      gitAddAll(){
        devAjax.devToolGitAddAll({workspace: this.workspace}).then(res => {
          this.conf.reInit();
        })
      },
      isEnc(item){return /^\+/.test(item);},
      isDec(item){return /^-/.test(item);},
      handelClick (file, repertory) {
        this.curFile = file;
        const sentData = {
          filePath: file.filePath,
          workspace: repertory.workspace,
          repertory: repertory.repertory
        };
        devAjax.devToolGitDiffFile(sentData).then(res => {
          this.diff = res.data.data[0];
        })
      },
      onConfirm(){
        this.conf.hide();
        devAjax.devToolGitCommitAll({
          workspace: this.workspace,
          msg: this.commitMsg,
          userName: this.userName
        }).then(res => {
          this.commitMsg = "";
          this.curFile = "";
          this.conf.showMsgPop(res.data.data);
          // this.conf.reInit();
        })
      },
      onCancle(){
        this.conf.hide();
      },
      onSelect(item){
        this.type = item;
        this.$refs.drop.blur();
      },
    },
    mounted() {},
    watch: {},
  }
</script>

<style scoped>
  .git-status{
    position: absolute;
    width: 80%;
    height: 80%;
    min-height: 400px;
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -40%);
    display: flex;
    flex-direction: column;
  }
  .git-status-title{
    line-height: 50px;
    font-size: 16px;
    font-weight: bold;
    color: #666;
    display: flex;
  }
  .git-status-title>div{}
  .git-status-title>div:last-child{
    flex: 1 1 0;
    text-align: right;
  }
  .git-status-title>div:last-child>span{
    display: inline-block;
    color: #333;
    opacity: .6;
    padding: 0 20px;
    transition: all .3s;
  }
  .git-status-title>div:last-child>span:hover{
    color: #2870ba;
  }
  .git-status-title>div:last-child>span:active{
    opacity: 1;
  }
  .git-status-left-title{
    display: flex;
    line-height: 40px;
    font-size: 14px;
    font-weight: bold;
    color: #666;
    border-bottom: 1px solid #ccc;
  }
  .git-status-left-title>div:first-child{

  }
  .git-status-left-title>div:last-child{
    flex: 1 1 0;
    text-align: right;
  }
  .git-status-left-title>div:last-child>span{
    margin: 0 4px;
    padding: 0 4px;
    opacity: .6;
    transition: all .3s;
    border-radius: 2px;
    background-color: #fff;
    color: #666;
  }
  .git-status-left-title>div:last-child>span:hover{
    opacity: 1;
  }
  .git-status-left-title>div:last-child>span:active{
    opacity: 1;
    color: #fff;
    background-color: #2870bc;
  }
  .git-status-list{
    padding: 10px 0;
  }
  .git-status-list li{
    line-height: 30px;
  }
  .git-status-list li div{
    padding: 0 10px;
    opacity: .6;
    background-color: #fff;
    color: #333;
    transition: all .3s;
    border-radius: 2px;
    cursor: pointer;
  }
  .git-status-list li div:hover{
    background-color: #2870bc;
    color: #fff;
    opacity: .6;
  }
  .git-status-list li div.active{
    background-color: #2870bc;
    color: #fff;
    opacity: .8;
  }
  .git-status-list li div:active{
    background-color: #2870bc;
    color: #fff;
    opacity: 1;
  }
  .git-status-cont{
    display: flex;
    flex: 1 1 0;
    overflow: hidden;
  }
  .git-status-cont > div{
    flex: 0 0 50%;
    margin: 4px;
    padding: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
  }
  .git-status-cont > div.git-status-left{
    overflow: scroll;
  }
  .git-status-right>ul{
    height: 100%;
    width: 100%;
    overflow: scroll;
  }
  .git-status-right>ul>li{
    display: inline-block;
    min-width: 100%;
    transition: all .3s;
    padding: 4px 0;
    border-bottom: 1px solid #2870ba;
  }
  .git-status-right>ul>li>div{
    white-space: nowrap;
    font-size: 12px;
    line-height: 20px;
    padding: 0 10px;
    margin: 2px 0;
    cursor: pointer;
  }
  .git-status-right>ul>li>div.enc{
    background-color: rgba(78,186,15,.5);
    color: #fff;
  }
  .git-status-right>ul>li>div.dec{
    background-color: rgba(236,83,21,.5);
    color: #fff;
  }
  .git-status-right>ul>li>div.enc.active{
    background-color: rgba(78,186,15,.8);
  }
  .git-status-right>ul>li>div.dec.active{
    background-color: rgba(236,83,21,.8);
  }
  .git-status-right>ul>li>div>b{
    display: inline-block;
    min-width: 30px;
    opacity: .6;
    font-size: 12px;
    text-align: center;
  }
  .git-status-foot{
    display: flex;
    justify-content: flex-end;
  }
  .git-status-foot>div{
    flex: 1 1 0;
    padding: 4px 10px;
    border: 1px solid #ccc;
    margin-left: 4px;
    border-radius: 2px;
  }
  .git-status-foot>div>input{
    line-height: 20px;
  }
  .git-status-foot>span{
    line-height: 30px;
    padding: 0 10px;
    background-color: #fff;
    border-radius: 4px;
    margin-left: 10px;
  }
  .git-status-foot>span:last-child{
    background-color: #2870ba;
    color: #fff;
  }
</style>
